<!-- 引入模板文件 -->
<!-- 注意：引用的是绝对路径 -->
<extend name="./Public/templete/base.html"/>  

<!-- 页面标题 -->
<block name="title"><title>Index/login</title></block>

<!-- 添加该页面对应需要的css文件 -->
<block name="link">
  <link rel="shortcut icon" src="./favicon.ico" />
  <link rel="stylesheet" type="text/css" href="../../../Public/source/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../../../Public/source/attendance/main.css">
</block>


<!-- 右下侧的主体内容 主要内容在此处写 -->
<block name="content">
    <div class="layui-body">
        <div style="margin: 15px;">
           <!-- 代码从此次开始写，外层两个div不建议删除 -->
            <blockquote class="layui-elem-quote at-quote-no" >今日您<span id="tip1"></span>，今日负责人是<span id="tip2"></span></blockquote>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>考勤统计</legend>
            </fieldset>
            <div class="layui-row layui-col-space15">
              <div class="layui-col-xs3">
                 <div id="tdy" class="at-btn-ech-tdy"></div>
              </div>
              <div class="layui-col-xs6">
                <div id="lne" class="at-btn-ech-lne"></div>
              </div>
              <div class="layui-col-xs3">
                <div id="slf" class="at-btn-ech-tdy"></div>
              </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>考勤历史</legend>
            </fieldset>
            <table class="layui-hide" id="table"></table>
        </div>
    </div>
</block>  

<!-- 引入或写js代码 -->
<block name="js">
  <script src="../../../Public/source/jquery-3.2.1.js"></script>
  <script src="../../../Public/source/Echarts/echarts.min.js"></script>
  <script src="../../../Public/source/layui/layui.js"></script>
  <script>
  //JavaScript代码区域
  $.ajax({
        url:'__URL__/choose'
      });
  $.ajax({
    url:'__URL__/tip'
    ,success:function($data)
    {
      $('#tip1').text($data[0]);
      $('#tip2').text($data[1]);
    }
    });
  layui.use('element', function(){
    var element = layui.element;
  });
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#table'
      ,url:'__URL__/profile1'
      ,unresize: true
      ,height: "full-540"
      ,page:true
      ,limit:5
      ,cols: [[
          {field: 'date', title: '日期', width: 146, sort: true}
          ,{field: 'num', title: '编号', width: 128, sort: true}
          ,{field: 'name', title: '姓名', width: 180}
          ,{field: 'group', title: '方向', width: 96, sort: true}
          ,{field: 'status', title: '职位', width: 120, sort: true}
          // ,{field: 'grade', title: '年级', width: 106, sort: true}
          // ,{field: 'department', title: '系别', width: 260}
          //,{field: 'time', title: '时间', width: 146}
          ,{field: 'stat', title: '说明', templet: '#statusTpl'}
          ,{field: 'operator', title: '负责人', width: 180}
      ]]
      ,page: true
    });
  });
    $.ajax({
      url: "__URL__/profile2",
      dataType: "json",
      type: "get",
      // data: {},
      success: function(data){
        drawTodayChart(data[0]['value'], data[1]['value'], data[2]['value']);
        console.log(data[0]['value'])
      },
      error: function(err){ }
    })
    $.ajax({
      url: "__URL__/profile3",
      dataType: "json",
      type: "get",
      // data: {},
      success: function(data){
        drawSelfChart(data[0]['value'], data[1]['value'], data[2]['value']);
      },
      error: function(err){ }
    })
    function drawTodayChart(a, b, c){
      var myChart = echarts.init(document.getElementById('tdy'));
      option = {
          title : {
              text: '今日思政考勤统计',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
              {
                  name: '出勤统计',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:a, name:'到勤'},
                      {value:b, name:'缺勤'},
                      {value:c, name:'迟到'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      myChart.setOption(option);
    }
    function drawSelfChart(a, b, c){
      var myChart = echarts.init(document.getElementById('slf'));
      option = {
          title : {
              text: '个人历史考勤统计',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
              {
                  name: '出勤统计',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:a, name:'出勤'},
                      {value:b, name:'缺勤'},
                      {value:c, name:'迟到'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      myChart.setOption(option);
    }
    $.ajax({
      url: "__URL__/history1",
      dataType: "json",
      type: "get",
      // data: {},
      success: function(data){
        var dateArray = new Array();
        var typeaArray = new Array();
        var typebArray = new Array();
        for (var i = data.length - 1; i >= 0; i--) {
          dateArray[i] = data[i].date;
          typeaArray[i] = data[i].typea;
          typebArray[i] = data[i].typeb;
        }
        drawChart(dateArray, typeaArray, typebArray);
      },
      error: function(err){ }
    })
    function drawChart(a, b, c){
      var myChart = echarts.init(document.getElementById('lne'));
      option = {
          tooltip : {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          grid: {
              left: '2%',
              right: '2%',
              top: "2%",
              bottom: '2%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : a
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'到勤人数',
                  type:'line',
                  stack: '人',
                  areaStyle: {normal: {}},
                  data: b
              },
              {
                  name:'缺勤人数',
                  type:'line',
                  stack: '人',
                  areaStyle: {normal: {}},
                  data: c
              }
          ]
      };
      myChart.setOption(option);
    }
  </script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>123
  </script>
  <script type="text/html" id="statusTpl">
    {{#  if(d.stat == 1){ }}
      <span style="color: green;">管理员将您设置为了已出勤。</span>
    {{#  } else if(d.stat == -1) { }}
      <span style="color: orange;">管理员将您设置为了迟到</span>
      {{#  } else if(d.stat == -2) { }}
      <span style="color: darkred;">管理员将您设置为了未出勤。</span>
    {{#  } else if(d.stat==0){}}
      <span style="color: grey;">今日未考勤。</span>
       {{#  } else {}}
       {{#  } }}
  </script>
</block>